<script setup lang="ts">
import { ref, type Ref } from 'vue'
const props = defineProps(['form', 'type', 'label', 'prop', 'required', 'rule', 'length'])

console.log(props);
interface RuleObject {
    required?: boolean;
    message?: string;
    validator?: (rule: any, value: any, callback: any) => any;
    trigger?: string;
}
type Validator = (rule: any, value: any, callback: any) => any;
// const rules = ref([])
const rules: Ref<(RuleObject | Validator)[]> = ref([])

// 必传
rules.value.push({ required: true, message: `请填写${props.label}` })

if (props.rule === "name") {
    rules.value.push({
        validator: (rule: any, value: any, callback: any) => {
            if (/^[\u4e00-\u9fa5]{2,4}$/.test(value)) {
                // 判断成功
                return callback(); // 返回正确就是callback没有参数
            }
            callback(`请输入正确的${props.label}`); // 否则就是提示信息
        },
        trigger: "blur",
    });
} else if (props.rule === "organizationname") {
    rules.value.push({
        validator: (rule: any, value: any, callback: any) => {
            if (/^[\u4e00-\u9fa5|\w]{2,15}$/.test(value)) {
                // 判断成功
                return callback(); // 返回正确就是callback没有参数
            }
            callback(`请输入正确的${props.label}`); // 否则就是提示信息
        },
        trigger: "blur",
    });
} else if (props.rule === "phone") {
    rules.value.push({
        validator: (rule: any, value: any, callback: any) => {
            if (/^1\d{10}$/.test(value)) {
                // 判断成功
                return callback(); // 返回正确就是callback没有参数
            }
            callback(`请输入正确的${props.label}`); // 否则就是提示信息
        },
        trigger: "blur",
    });
} else if (props.rule === "password") {
    rules.value.push({
        validator: (rule: any, value: any, callback: any) => {
            if (/^.{8,}$/.test(value)) { // 判断成功
                return callback(); // 返回正确就是callback没有参数
            }
            callback('请输入8个字符以上的密码'); // 否则就是提示信息
        }, trigger: 'blur',
    });
} else if (props.rule === "email") {
    rules.value.push({
        validator: (rule: any, value: any, callback: any) => {
            if (/^[\w-]+(\.[\w-]+)*@([\w-]+\.)+[a-zA-Z]{2,7}$/.test(value)) { // 判断成功
                return callback(); // 返回正确就是callback没有参数
            }
            callback('请输入正确的邮箱'); // 否则就是提示信息
        }, trigger: 'blur',
    });
} else if (props.rule === "number") {
    rules.value.push({
        validator: (rule: any, value: any, callback: any) => {
            if (/^\d+(\.\d{1,2})?$/.test(value)) { // 判断成功
                return callback(); // 返回正确就是callback没有参数
            }
            callback('请输入正确的价格，小数点后最多保留两位'); // 否则就是提示信息
        }, trigger: 'blur',
    });
} else if (props.rule) {
    rules.value.push(props.rule);
}
</script>



<template>
    <div>
        <el-form-item :label="label" :prop="prop" :rules="rules">
            <div class="row">
                <!-- eslint-disable-next-line vue/no-mutating-props -->
                <el-input v-model="form[prop]" :maxlength="length" />
                <slot name="append"></slot>
            </div>
        </el-form-item>
    </div>
</template>


<style scoped></style>